<template>
  <el-dialog :title="delPopup.title" :visible.sync="delPopup.isShow" width="400px">
    <div class="delPopupContent">
      <i v-if="!delPopup.type" class="iconfont">{{delPopup.icon ? '&#xe608;' : "&#xe609;"}}</i>
      <p v-if="!delPopup.type" :style="{color:delPopup.color}">{{delPopup.describe}}</p>
      <div class="password" v-if="delPopup.type">
        <span class="title"><span style="color:#FF1D1D">*</span>系统管理员密码:</span>
        <el-input v-model="password" maxlength="32" placeholder="请输入密码" show-password></el-input>
        <div v-if="delPopup.type==1" class="password_footer">删除成功后该账套移交至回收站</div>
        <div v-else class="password_footer" style="color:#FF1D1D">删除后帐套数据不可恢复,请谨慎删除</div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button  size="medium" @click="delPopup.isShow = false" round>取 消</el-button>
      <el-button  size="medium" :loading="isConfirmLoading" type="primary" @click="delPost" round>确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>

/**
 * @example
 * <delPopup @delPostConfirm="delTreeNodePost" :delPopup="delPopup"/>
 */
import md5 from 'js-md5';
export default {
  name: 'delPopup',
  props: {
    delPopup: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      isConfirmLoading: false,
      password: ''
    };
  },
  methods: {
    delPost () {
      if(this.delPopup.type) {
        if(!this.password) {
          this.$message({ message: '请输入系统管理员密码', type: 'warning' });
          return false;
        }
        // let reg = /^[0-9a-zA-Z]+$/
        // if(!reg.test(this.password)){
        //   this.$message({message: '管理员密码字符只能为数字与字母',type: 'warning'});
        //   return false
        // }
        let pwd = this.password;
        let password = md5(pwd);
        this.$emit('delPostConfirm', { password });
        this.password = '';
      }else{
        this.$emit('delPostConfirm');
      }
      this.isConfirmLoading = true;
      setTimeout(()=>{
        this.isConfirmLoading = false;
      }, 800);
    }
  }
};
</script>
<style scoped lang='less'>
  .delPopupContent {
    text-align: center;
    padding: 30px 0;
    >.iconfont {
      font-size: 100px;
      color: #DEE3E9;
      line-height: 1;
    }
    >p{
      text-align: center;
      font-size: 17px;
      margin-top: 10px;
    }
    .password{
      .title{
        width: 120px;
        display: inline-block;
      }
      .el-input{
        width:200px;
        margin-left: 5px;
      }
      .password_footer{
        height: 45px;
        line-height: 45px;
        text-align: left;
        padding-left: 28px;
      }
    }
  }
</style>
